﻿import React from 'react';
import { Form, Icon, Row, Col, Spin, Button, Input, Cascader} from 'antd';
import { connect } from 'react-redux'
import { hashHistory } from 'react-router'
import * as SelectTypes from '../../components/Form/CustomSelect'
import { enterpiseCreate, enterpriseCreateClear } from '../../actions'
import { region } from '../../assets/data/region'
const FormItem = Form.Item;

/**
 * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
 */
class EnterpriseCreate extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      province:null,
      city:null,
    }
  }

  componentWillUnmount () {
    this.props.dispatch(enterpriseCreateClear()());
  }

  onClearClick () {
    this.props.form.resetFields();
  }

  onLocationChange(value, selectOptions) {
    console.log(value, selectOptions);
    this.setState({province:selectOptions[0].label, city:selectOptions[1].label})
  }

  onSaveClick(e) {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (!!errors) {
        return;
      }
      console.log(this.state);
      this.props.dispatch(enterpiseCreate.request()({...values, ...this.state}));
    });
  }

  render() {
    let { getFieldDecorator } = this.props.form;
    let { loading, success } = this.props;
    const container = (
      <Form horizontal>
        <Row gutter={16}>
          <Col sm={1}>
          </Col>
          <Col sm={10}>
            <FormItem	label="单位名称"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('name', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="通讯地址"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('address', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="邮箱地址"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('email', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="联系人"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('linkman', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="联系人职位"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('title', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="行业"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} >
              {getFieldDecorator('industry')(<Input  />)}
            </FormItem>
            <FormItem	label="是否上市"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} >
              {getFieldDecorator('stockMarket')(SelectTypes.SwitchSelect)}
            </FormItem>
            <FormItem	label="网址"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }}>
              {getFieldDecorator('homepage')(<Input  />)}
            </FormItem>


          </Col>
          <Col sm={10}>
            <FormItem	label="单位所在地"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('location', { rules: [{required: true}] })(<Cascader onChange={this.onLocationChange.bind(this)} options={region} expandTrigger="hover" />)}
            </FormItem>
            <FormItem	label="邮政编码"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('zipCode', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="固定电话"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('telephone', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="联系人部门"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} required>
              {getFieldDecorator('department', { rules: [{required: true}] })(<Input  />)}
            </FormItem>
            <FormItem	label="规模"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }}>
              {getFieldDecorator('scale')(<Input  />)}
            </FormItem>
            <FormItem	label="注册资本"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }}>
              {getFieldDecorator('registeredCapital')(<Input  />)}
            </FormItem>
            <FormItem	label="单位性质"	labelCol={{ span: 8 }}	wrapperCol={{ span: 16 }} >
              {getFieldDecorator('type')(SelectTypes.CompanyTypeSelect)}
            </FormItem>


          </Col>
          <Col sm={3}>
          </Col>
        </Row>
        <Row type="flex" justify="center">
          <Button type="primary" onClick={this.onSaveClick.bind(this)} disabled={success}>保存</Button>
          &nbsp;&nbsp;&nbsp;
          <Button onClick={this.onClearClick.bind(this)} disabled={success}>清除</Button>
        </Row>
      </Form>
    );

    return (
      <Spin spinning={loading}>{container}</Spin>
    );
  }

}

EnterpriseCreate = Form.create()(EnterpriseCreate);

function mapStateToProps(state) {
  return {
    success:state.enterprise.success,
    loading:state.enterprise.loading
  };
}

export default connect(mapStateToProps)(EnterpriseCreate)
